<!DOCTYPE html>
<html>

<head>
  <title>润群官网</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

  <!-- 引入museUI -->
  <!-- <link rel="stylesheet" href="https://runqun.gitee.io/muse-ui/muse-ui.css"> -->
  <!-- Muse-UI 实现 ，推荐使用 字体，如果不需要 Roboto 字体，请跳过此步骤。 -->
  <!-- <link rel="stylesheet" href="https://runqun.gitee.iomuse-ui/roboto-family.css"> -->
  <!-- Muse-UI 推荐使用material-design-icons , 需要从 CDN 上引入字体图标库。 -->
  <!-- <link rel="stylesheet" href="https://runqun.gitee.iomuse-ui/material-icons.css"> -->
  <style media="screen">
    .flex-box-perant {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid red;
    }

    .flex-box-item {
      width: 100px;
      height: 50px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="flex-box-perant">
    <div class="flex-box-item">
      flex-box-item
    </div>
  </div>

  <div id='app'>
    {{a}}
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <div v-bind:id="dynamicId">{{dynamicId}}</div>
    <p><a v-bind:href="bind_url">i am a link</a></p>
    <p><button :disabled="isButtonDisabled">Button</button></p>
    <p v-if="seen">现在你看到我了</p>
    <p><a @click="someEvent">onlick event</a></p>
    <div>
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
    <div id="todo-list-example">
      <form v-on:submit.prevent="addNewTodo">
        <label for="new-todo">Add a todo</label>
        <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
        <button>Add</button>
      </form>
      <ul>
        <li is="todo-item" v-for="(todo, index) in todos" :key="todo.id" :title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
      </ul>
    </div>

    <blog-post v-for="post in posts" :post="post" :key="post.id" v-on:btn-click='btnClickEvent'>

    </blog-post>
  </div>


  <!-- museUI依赖vue2.0版本 -->
  <script src="vue/vue.js"></script>
  <!-- <script src="https://runqun.gitee.io/vue/vue.js"></script> -->
  <!-- <script src="https://runqun.gitee.io/vue/vue.min.js"></script> -->
  <!-- <script src="muse-ui/muse-ui.js"></script> -->
  <!-- <script src="muse-ui/es5/index.js"></script> -->

  <script>
    var data_common = {
      rawHtml: '<span style="color:red">hahahha am in red...</span>'
    }
    // for todo item component
    Vue.component('todo-item', {
      template: '\
  <li>\
    {{ title }}\
    <button v-on:click="$emit(\'remove\')">Remove</button>\
  </li>\
',
      props: ['title']
    })

    // base component
    Vue.component('blog-post', {
      props: ['post'],
      data: function() {
        return {
          count: 0
        }
      },
      template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <p v-html="post.content"></p>
      <button @click="$emit('btn-click',$event.target.id+','+$event.target.name)" :id="post.id" :name='post.title'>组件内部listener</button>
    </div>
  `
    })


    var vm = new Vue({
      el: '#app',
      data: {
        a: 1,
        newTodoText: '',
        // 如果这样引用的话，是不会影响到下面posts中的content属性的
        rawHtml: data_common.rawHtml,
        todos: [{
            id: 1,
            title: 'Do the dishes',
            content: 'aaaaaaa'
          },
          {
            id: 2,
            title: 'Take out the trash',
            content: 'bbbbbb'
          },
          {
            id: 3,
            title: 'Mow the lawn',
            content: 'ccccc'
          }
        ],
        posts: [{
            id: 1,
            title: 'aaaaa',
            content: data_common.rawHtml
          },
          {
            id: 2,
            title: 'bbbbbb',
            content: data_common.rawHtml
          },
          {
            id: 3,
            title: 'ccccccc',
            content: data_common.rawHtml
          }
        ],
        nextTodoId: 4,

        dynamicId: 'dynamicId-binded',
        bind_url: 'index.html',
        isButtonDisabled: true,
        seen: true,
        someEvent: onclickEventA,
        message: 'Hello'
      },
      computed: {
        // 计算并返回reversedMessage字段的函数
        reversedMessage: function() {
          // this指向vm实例
          return this.message.split('').reverse().join('');
        }
      },
      methods: {
        addNewTodo: function() {
          this.todos.push({
            id: this.nextTodoId++,
            title: this.newTodoText
          })
          this.newTodoText = ''
        },
        // 组件内部的点击事件需要定义在methods中
        btnClickEvent(id) {
          /**
           *  如果需要传递父组件的数据，那么需要使用$event.target.[property]进行传值
           *  v-bind指令只能帮定dom对象已有的property属性，而不是顺便自定义的属性
           */
          alert('组件的点击事件 id:' + id)
        }
      },
      created: function() {
        []
        // 实例被创建后的回调函数
        console.log('vue instanse had created..')
        // ，this代表的是vm的实例
        // console.log('vue instanse had created..' + this.a)
      }

    })

    function onclickEventA() {
      alert('onclickEventA ok')
    }
    /**
        promise代码学习
    */
    function testPromise(resolve, reject) {
      var timeOut = Math.random() * 2;
      setTimeout(function() {
        if (timeOut < 1) {
          console.log('call resolve');
          resolve('ok ' + timeOut)
        } else {
          console.log('call reject');
          reject('timeout in ' + timeOut + ' seconds.');
        }

      }, timeOut * 1000);

    }
    var promise1 = new Promise(testPromise)
    promise1.then(function(data) {
      console.log('success data1:' + data);
      return data + ' - then1'
    }).then(function(data) {
      console.log('success data2:' + data);
      throw new Error('');
      return data + ' - then2'
    }).then(function(data) {
      console.log('success data3:' + data);
      return data + ' - then3'
    }).catch(function(err) {
      console.log('errot data:' + err);
    })

    /**
        async await 学习
    */
    function sleep(duration) {
      return new Promise(function(resolve, reject) {
        setTimeout(resolve, duration);
      })
    }

    async function foo() {
      console.log('foo a');
      await sleep(3000)
      console.log('foo b');
    }
    async function foo2() {
      console.log('foo2 a');
      await sleep(1000)
      console.log('foo2 b');
    }

    async function main() {

      await foo()
      await foo2()

      // console.log(12.toString());

    }

    //main()

    var a = 1;

    function foo() {
      console.log(a);
      var a = 2;
    }

    foo();
    // function f() {
    //   console.log(f fun'');
    // }
    // f`a${a}c`
  </script>



</body>

</html>
